<template>
  <div class="formFontStyle" :class="editable ? 'peopleBoxCon1' : 'peopleBoxCon'">
    <!-- <div class="peopleBoxConCZ" v-if="!editable">
      操作
      <a-icon type="down" />
      <div class="peopleBoxConCZCon">
        <div class="peopleBoxConCZCondiv" @click="editShow">编辑</div>
        <div class="peopleBoxConCZCondiv" v-if="title === '任职受雇信息' && !remove" @click="$emit('delete')">删除</div>
      </div>
    </div> -->
    <a-dropdown v-if="!editable">
      <a-menu slot="overlay">
        <a-menu-item key="1" @click="editShow">编辑 </a-menu-item>
        <a-menu-item key="2" v-if="title === '任职受雇信息' && !remove" @click="$emit('delete')"> 删除 </a-menu-item>
      </a-menu>
      <a-button class="peopleBoxConCZ" style="margin-left: 8px"> 操作 <a-icon type="down" /> </a-button>
    </a-dropdown>
    <a-form class="formStyleShow" :form="form" :labelCol="{ span: 10 }" :wrapperCol="{ span: 12 }">
      <a-row v-if="isReward && formFields">
        <template v-if="sortedKeys">
          <div v-for="key in sortedKeys" :key="key">
            <a-col
              :span="9"
              v-if="key === 'contactAddressProvince1' || key === 'habitualResidenceProvince1' || key === 'domicileProvince1'"
            >
              <a-row>
                <a-col :span="24">
                  <XqItem
                    ref="XqItem"
                    :form="form"
                    :dataSource="dataSource"
                    :item="formFields[key]"
                    :dynamicData="dynamicData"
                    :editable="editable"
                    :validator="getValidator(key)"
                    @change="XqItemChange($event, formFields[key], dataSource, dynamicData)"
                  />
                </a-col>
              </a-row>
            </a-col>
            <a-col :span="12" v-else-if="key === 'contactAddressDetail'">
              <a-row>
                <a-col :span="24" class="hei40">
                  <XqItem
                    ref="XqItem"
                    :form="form"
                    :showLabel="false"
                    :dataSource="dataSource"
                    :item="formFields['contactAddressDetail']"
                    :dynamicData="dynamicData"
                    :editable="editable"
                    :validator="getValidator('contactAddressDetail')"
                    @change="XqItemChange($event, formFields['contactAddressDetail'], dataSource, dynamicData)"
                  />
                </a-col>
              </a-row>
            </a-col>

            <a-col :span="12" v-else-if="key === 'habitualResidenceDetail'">
              <a-row>
                <a-col :span="24" class="hei40">
                  <XqItem
                    ref="XqItem"
                    :form="form"
                    :showLabel="false"
                    :dataSource="dataSource"
                    :item="formFields['habitualResidenceDetail']"
                    :dynamicData="dynamicData"
                    :editable="editable"
                    :validator="getValidator('habitualResidenceDetail')"
                    @change="XqItemChange($event, formFields['habitualResidenceDetail'], dataSource, dynamicData)"
                  />
                </a-col>
              </a-row>
            </a-col>
            <a-col :span="12" v-else-if="key === 'domicileDetail'">
              <a-row>
                <a-col :span="24" class="hei40">
                  <XqItem
                    ref="XqItem"
                    :form="form"
                    :showLabel="false"
                    :dataSource="dataSource"
                    :item="formFields['domicileDetail']"
                    :dynamicData="dynamicData"
                    :editable="editable"
                    :validator="getValidator('domicileDetail')"
                    @change="XqItemChange($event, formFields['domicileDetail'], dataSource, dynamicData)"
                  />
                </a-col>
              </a-row>
            </a-col>
            <a-col :span="12" v-else-if="key === 'authorityId'">
              <a-form-item label="所属税局" v-if="editable" :label-col="{ span: 8 }" :wrapper-col="{ span: 10 }">
                <a-cascader
                  v-decorator="['authorityId', { rules: [{ required: true, message: '请选择所属税局!' }] }]"
                  :options="dataList"
                  expand-trigger="hover"
                  :disabled="formFields['authorityId'].customize.disabled ? formFields['authorityId'].customize.disabled : false"
                  placeholder="请选择所属税局"
                  :show-search="{ filter }"
                  @change="onChangeAuthorityId"
                />
              </a-form-item>
              <a-form-item label="所属税局" :label-col="{ span: 8 }" :wrapper-col="{ span: 15 }" v-if="!editable" class="widCompany"
                >{{ dataSource.companyName }}/{{ dataSource.authorityName }}</a-form-item
              >
            </a-col>
            <a-col :span="12" v-else-if="key === 'phoneNew'" style="position: relative">
              <XqItem
                ref="XqItem"
                :form="form"
                :dataSource="dataSource"
                :item="formFields[key]"
                :dynamicData="dynamicData"
                :editable="editable"
                :validator="getValidator(key)"
                @change="XqItemChange($event, formFields[key], dataSource, dynamicData)"
              />
              <div style="position: absolute; bottom: 31px; left: 76.6667%; color: #a6a8b4; font-size: 12px">
                <a-popover trigger="hover">
                  <template slot="content">
                    <span>本次任职受雇时所使用的手机号</span>
                  </template>
                  <span class="icon iconfont" style="cursor: pointer; color: #a6a8b4">&#xe6cf;</span>
                </a-popover>
              </div>
            </a-col>
            <a-col :span="12" v-else-if="key === 'email'">
              <XqItem
                ref="XqItem"
                :form="form"
                :dataSource="dataSource"
                :item="formFields[key]"
                :dynamicData="dynamicData"
                :editable="editable"
                :validator="getValidator(key)"
                @change="XqItemChange($event, formFields[key], dataSource, dynamicData)"
              />
            </a-col>
            <a-col :span="12" v-else>
              <XqItem
                v-if="detailedShow"
                ref="XqItem"
                :form="form"
                :dataSource="dataSource"
                :item="formFields[key]"
                :dynamicData="dynamicData"
                :editable="editable"
                :validator="getValidator(key)"
                @change="XqItemChange($event, formFields[key], dataSource, dynamicData)"
              />
              <div v-if="key === 'personalInvestmentRatio'" style="position: absolute; bottom: 31px; left: 76.6667%">%</div>
            </a-col>
          </div>
        </template>
        <template v-else>
          <div v-for="item in formFields" :key="item.model">
            <a-col :span="12">
              <XqItem
                ref="XqItem"
                :form="form"
                :dataSource="dataSource"
                :item="item"
                :dynamicData="dynamicData"
                :editable="editable"
                :validator="getValidator(item.model)"
                @change="XqItemChange($event, item, dataSource, dynamicData)"
              />
            </a-col>
          </div>
        </template>
      </a-row>
    </a-form>
    <div v-show="editable && remove && status === 'add'" class="DynamicForm">
      <a-space>
        <a-button type="danger" ghost @click="onRemove">删 除</a-button>
      </a-space>
    </div>
    <div v-show="editable && status !== 'add'" class="DynamicForm">
      <a-space>
        <a-button v-if="remove" type="danger" ghost @click="onRemove">删 除</a-button>
        <a-button type="primary" @click="save">保 存</a-button>
        <a-button @click="cancel">取 消</a-button>
      </a-space>
    </div>
  </div>
</template>
<script>
import XqFormMixin from "xqjr-plugin-form/mixins/XqFormMixin";
const FormMixin = XqFormMixin();
import moment from "moment";
import { getCompanyAuthoritiesListAll } from "../api";
export default {
  mixins: [FormMixin],
  props: {
    sortedKeys: {
      type: Array,
      default: () => null
    },
    remove: {
      type: Boolean,
      default: false
    },
    detailedShow: {
      type: Boolean,
      default: true
    },
    dataSource: {
      type: Object,
      default: () => {}
    },
    editable: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: true
    },
    dynamicData: {
      type: Object,
      default: () => {}
    },
    status: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: ""
    },
    dataListArr: {
      type: Array,
      default: () => null
    }
  },
  data() {
    return {
      companyName: "",
      authId: undefined,
      dataList: [],
      replaceFields: {
        children: "companyAuthorityList",
        title: "responsibleAuthorityName",
        key: "id",
        value: "id"
      },
      isReward: true,
      spouseInfo: false
    };
  },
  created() {},
  watch: {
    dataListArr: {
      handler(val) {
        if (val) {
          this.dataList = val.map((i) => {
            return {
              label: i.name,
              value: i.id,
              children: i.companyAuthorityList
                ? i.companyAuthorityList.map((r) => {
                    return { label: r.responsibleAuthorityName, value: r.id };
                  })
                : []
            };
          });
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    filter(inputValue, path) {
      return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
    },
    editShow() {
      this.$emit("edit");
      this.$nextTick(() => {
        this.setFieldsValueShow("authorityId", this.dataSource.authorityId);
      });
    },
    onChangeAuthorityId(e, selectedOptions) {
      console.log(e, selectedOptions);
    },
    getFieldValue(key) {
      return this.form.getFieldValue(key);
    },
    setFieldsValueShow(key, value) {
      setTimeout(() => {
        this.form.setFieldsValue({ [key]: value });
      }, 100);
    },

    vilidateRetirementDate(rule, value, callback) {
      const form = this.form;
      if (this.$attrs.basicData.birthday) {
        if (moment(value).valueOf() < moment(this.$attrs.basicData.birthday).valueOf()) {
          callback("退休日期不能大于出生日期");
        } else {
          callback();
        }
      } else {
        callback();
      }
    },
    getDataRules() {
      this.getData()
        .then((res) => {
          console.log("debug log --> ", res);
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    XqItemChange(val, item, dataSource, dynamicData) {
      // console.log(val, item, dataSource, dynamicData);
      if (
        item.model === "licenseNumber" ||
        item.model === "isDisable" ||
        item.model === "isMartyr" ||
        item.model === "totalPersonalInvestment" ||
        item.model === "employmentType" ||
        item.model === "resignDate" ||
        item.model === "employedDate" ||
        item.model === "status" ||
        item.model === "bank" ||
        item.model === "bankProvince" ||
        item.model === "bankCard"
      ) {
        this.$emit("itemChange", val, item.model, dataSource);
      }
    },
    save() {
      this.getData()
        .then((res) => {
          Object.keys(res).forEach((element) => {
            if (res[element] === "true") {
              res[element] = true;
            }
            if (res[element] === "false") {
              res[element] = false;
            }
            if (res[element] && res[element]._isAMomentObject) {
              if (element === "birthday") {
                res[element] = moment(res[element]).format("YYYY-MM-DD");
              } else {
                res[element] = moment(res[element]).format("YYYY-MM-DD");
              }
            }
          });
          this.$emit("change", res);
        })
        .catch((err) => {
          // this.$emit("change");
          console.log("debug log --> ", err);
        });
    },
    async saveReturn() {
      const res = await this.getData();
      console.log(res);
      try {
        Object.keys(res).forEach((element) => {
          if (res[element] === "true") {
            res[element] = true;
          }
          if (res[element] === "false") {
            res[element] = false;
          }
          if (res[element] && res[element]._isAMomentObject) {
            // if (element === "birthday") {
            //   res[element] = moment(res[element]).format("YYYY-MM-DD") + " 00:00:00";
            // } else {
            res[element] = moment(res[element]).format("YYYY-MM-DD");
            // }
          }
        });
        return res;
      } catch (error) {
        console.log("debug log --> ", error);
      }
    },
    onRemove() {
      this.$emit("remove");
    },
    cancel() {
      this.$emit("update:editable", false);
      this.$emit("cancel");
    },
    onValuesChangeCustom(values) {}
  }
};
</script>

<style lang="scss" scoped>
.DynamicForm {
  text-align: center;
}
</style>
<style lang="scss">
.widCompany .ant-form-item-control-wrapper .ant-form-item-control {
  .ant-form-item-children {
    display: inline-block;
    width: 68%;
    // line-height: 20px;
  }
}
.formFontStyle {
  position: relative;
  label {
    font-weight: 400 !important;
  }
  .formStyleShow {
    .ant-calendar-picker {
      width: 100%;
    }
  }
  .ant-col-13 {
    height: 40px;
    .ant-form-item-control {
      line-height: 23px;
    }
  }
  .ant-col-11 {
    line-height: 23px;
  }
  .hei40 {
    .ant-col-24 {
      height: 40px;
      .ant-form-item-control {
        line-height: 23px;
      }
    }
  }
  .peopleBoxConCZ {
    width: 72px;
    height: 32px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    text-align: center;
    line-height: 32px;
    cursor: pointer;
    // width: 80px;
    // height: 70px;
    position: absolute;
    top: 32px;
    right: 32px;
    z-index: 9;
  }
  .peopleBoxConCZCon {
    position: absolute;
    top: 33px;
    width: 80px;
    background: #fff;
    text-align: center;
    display: none;
  }
  .peopleBoxConCZCondiv {
    height: 36px;
    color: #55565d;
    line-height: 36px;
    cursor: pointer;
  }
  .peopleBoxConCZCondiv:hover {
    background: rgba(106, 102, 246, 0.16);
    color: #6a66f6;
  }
  .peopleBoxConCZ:hover .peopleBoxConCZCon {
    display: block;
  }
  .peopleBoxCon {
    background: #fafafa;
    border-radius: 4px;
    border: 1px solid #e8e8e8;
    width: 100%;
    margin: 12px 0 27px 0;
    position: relative;
    padding: 32px 0;
  }
  .peopleBoxCon1 {
    background: #ffffff;
    box-shadow: 0px 6px 16px 8px rgba(0, 0, 0, 0.03), 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    width: 100%;
    margin: 12px 0 27px 0;
    position: relative;
    padding: 32px 0;
  }
}
</style>
<style scoped lang="scss"></style>
